<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="stylesheet" href="../static/css/center.css" />
</head>
<body>
<div class="container">
    <!-- 导航栏 -->
    <nav class="navbar">
        <img
                src="../static/image/cutcamera.png"
                alt="用户头像"
                style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover;"
        />
        <a href="{{ url_for('center') }}">
            <button class="nav-button" id="center-btn">个人中心</button>
        </a>
        <a href="{{ url_for('account') }}">
            <button class="nav-button" id="account-btn">账号安全</button>
        </a>
        <a href="{{ url_for('guide') }}">
            <button class="nav-button" id="guide-btn">使用指南</button>
        </a>
        <a href="{{ url_for('crawler') }}">
            <button class="nav-button">评论数据获取</button>
        </a>
        <a href="{{ url_for('exploration') }}">
            <button class="nav-button">探索型数据分析</button>
        </a>
        <button class="nav-button" id="logout-btn">退出登录</button>
    </nav>

    <!-- 个人中心内容 -->
    <div class="container" id="center-content">
        <div class="center">
            <h1>个人中心</h1>
            <div class="profile-avatar">
                <img
                        src="../static/image/cutcamera.png"
                        alt="用户头像"
                        style="width: 100px; height: 100px; border-radius: 50%; object-fit: cover;"
                />
            </div>
            <!-- 用户信息表单 -->
            <form method="POST" action="{{ url_for('center') }}" class="form-container">
                <div class="form-group">
                    <label for="username">用户名:</label>
                    <input
                            type="text"
                            id="username"
                            name="username"
                            value="{{ user.username }}"
                            placeholder="请输入用户名"
                            required
                    />
                </div>
                <div class="form-group">
                    <label for="address">地址:</label>
                    <input
                            type="text"
                            id="address"
                            name="address"
                            value="{{ user.address or '' }}"
                            placeholder="请输入XX省XX市XX县······"
                    />
                </div>
                <div class="form-group">
                    <label for="phone-number">电话:</label>
                    <input
                            type="tel"
                            id="phone-number"
                            name="phone_number"
                            value="{{ user.phone_number or '' }}"
                            placeholder="请输入电话号码"
                    />
                </div>
                <div class="form-group">
                    <label for="email">邮箱:</label>
                    <input
                            type="email"
                            id="email"
                            name="email"
                            value="{{ user.email or '' }}"
                            placeholder="请输入邮箱"
                    />
                </div>
                <button type="submit" id="save">保存</button>
            </form>
        </div>
    </div>
</div>
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>
